<template>
    <div class="inputBarVerify">
        <div class="input-bar-item">
            <div class="label">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <span>验证码</span>
            </div>
            <div class="input-bar">
                <input type="text" v-model="formData.verifyCode" placeholder="请输入验证码" @input="isGiveWayVerify = true">
                <p role="alert" class="toast-text-style" v-show="!isGiveWayVerify">
                    <svg class="icon" v-show="true" aria-hidden="true">
                        <use xlink:href="#icon-gantanhao"></use>
                    </svg>
                    {{ !isGiveWayVerify ? '验证码输入错误' : '' }}
                </p>
                <div class="verify">
                    <span v-if="!isSend" @click="sendVerify" :style="{color: colorStyle}">获取验证码</span>
                    <span v-else style="color: #6f9ae6">重新获取({{ timeOut }}s)</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "inputBarVerify",
        data() {
            return {
                formData: {
                    verifyCode: ''  // 验证码
                },

                timeOut: 59,
                isSend: false,  // 是否已发送验证码,
                colorStyle: '',
                isGiveWayVerify: true
            }
        },
        methods: {
            /*
            * 获取验证码
            * */
            sendVerify() {
                // 验证手机号码输入符合规则才可以发送验证码
                this.$validator.validate()
                    .then(valid => {

                        if (valid) {
                            this.isSend = true

                            let timer = setInterval(() => {
                                this.timeOut -= 1
                                if (this.timeOut === 0) {
                                    clearInterval(timer)

                                    this.isSend = false
                                    this.timeOut = 59
                                }
                            }, 1000)

                            console.log(this.$store.state.verifyCode);
                        }
                    })
            }
        },
        props: {
            mobile: String // 手机号
        }
    }
</script>

<style scoped>

</style>